<template>
  <div class="node-panel">
    <div
      v-for="item in nodeList"
      :key="item.text"
      class="node-item"
      @mousedown="$_dragNode(item)"
    >
      <div class="node-item-icon" :class="item.class">
        <div
          v-if="item.type === 'user' || item.type === 'time'"
          class="shape"
        ></div>
      </div>
      <span class="node-label">{{ item.label }}</span>
    </div>
  </div>
</template>
<script setup>
  import { nodeList } from '../../config'
  const props = defineProps({
    lf: {
      type: Object || String,
      default: () => {},
    },
  })

  function $_dragNode(item) {
    props.lf.dnd.startDrag({
      type: item.type,
      text: item.text || item.label,
    })
  }
</script>
<style lang="scss" scoped>
  .node-panel {
    position: absolute;
    top: 100px;
    left: $base-margin * 2;
    z-index: 101;
    width: 70px;
    padding: 20px 10px;
    text-align: center;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  }

  .node-item {
    margin-bottom: 10px;
  }

  .node-item-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
    background-size: cover;
  }

  .node-label {
    font-size: 12px;
    line-height: 30px;
    user-select: none;
  }

  .node-start {
    background: url('../background/start.png') no-repeat;
    background-size: cover;
  }

  .node-condition {
    background: url('../background/condition.png') no-repeat;
    background-size: cover;
  }

  .node-rect {
    border: 1px solid black;
  }

  .node-end {
    background: url('../background/end.png') no-repeat;
    background-size: cover;
  }
</style>
